<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <title>proc</title>
  <link href="static/style.css" rel="stylesheet" />
  <script src="static/jquery.min.js"></script>
  <script src="static/vue.min.js"></script>
</head>

<body>
  <div>
    <div class="tabs">
      <a href="/" class="tab-active">proc</a>
    </div>
  </div>
  <div id="content">
    <div>
      <table style="width: 100%;">
        <tr>
          <td style="width: 80%;">
            <input type="text" v-model="proc.key" placeholder="key" style="width: 100%;" />
          </td>
          <td style="width: 20%;">key</td>
        </tr>
        <tr>
          <td style="width: 80%;">
            <input type="text" v-model="proc.path" placeholder="path" style="width: 100%;" />
          </td>
          <td style="width: 20%;">
            <div>java -jar ...</div>
          </td>
        </tr>
        <tr>
          <td style="width: 80%;">
            <input type="text" v-model="proc.args" placeholder="args" style="width: 100%;" />
          </td style="width: 20%;">
          <td>command args</td>
        </tr>
        <tr>
          <td style="width: 80%;">
            <input type="text" v-model="proc.dir" placeholder="dir" style="width: 100%;" />
          </td style="width: 20%;">
          <td>exec dir</td>
        </tr>
        <tr>
          <td style="width: 80%;">
            <select v-model="proc.background">
              <option value="true">true</option>
              <option value="false">false</option>
            </select>
          </td style="width: 20%;">
          <td>background</td>
        </tr>
        <tr>
          <td style="width: 80%;">
            <select v-model="proc.keepAlive">
              <option value="false">false</option>
              <option value="true">true</option>
            </select>
          </td style="width: 20%;">
          <td>auto pull up</td>
        </tr>
        <tr>
          <td>
            <button type="button" @click="submit">add</button>
          </td>
          <td></td>
        </tr>
      </table>
    </div>
    <div>
      <table style="width: 100%;">
        <tr>
          <th>key</th>
          <th>path</th>
          <th>args</th>
          <th>dir</th>
          <th>background</th>
          <th>keepAlive</th>
          <th>status</th>
          <th>pid</th>
          <th>exitCode</th>
          <th>startAt</th>
          <th>exitAt</th>
          <th>lastOutStr</th>
          <th>lastErrStr</th>
          <th>opt</th>
        </tr>
        <tr v-for="proc in list" :key="proc.key">
          <td v-text="proc.key"></td>
          <td v-text="proc.path"></td>
          <td v-text="proc.args"></td>
          <td v-text="proc.dir"></td>
          <td v-text="proc.background"></td>
          <td v-text="proc.keepAlive"></td>
          <td>
            <span v-if="proc.status == 0">not start</span>
            <span v-if="proc.status == 1">running</span>
            <span v-if="proc.status == 2">stopped</span>
          </td>
          <td v-text="proc.pid"></td>
          <td v-text="proc.exitCode"></td>
          <td v-text="proc.startAt"></td>
          <td v-text="proc.exitAt"></td>
          <td v-text="proc.lastOutStr"></td>
          <td v-text="proc.lastErrStr"></td>
          <td>
            <button @click="startProc(proc.key)">start</button>
            <button @click="stopProc(proc.key)">stop</button>
            <button @click="deleteProc(proc.key)">delete</button>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <script>
    var vm = new Vue({
      el: '#content',
      data: {
        proc: {
          key: "",
          path: "",
          args: "",
          dir: "",
          background: true,
          keepAlive: false,
        },
        list: [],
      },
      methods: {
        listData() {
          let that = this
          $.get("/api/list", res => {
            if (res.code != 200) {
              alert(res.msg)
            } else {
              let list = res.data
              list.forEach(proc => {
                let args = ""
                proc.args.forEach(arg => {
                  args += arg + " "
                })
                proc.args = args
                if (proc.startAt != 0) {
                  proc.startAt = that.getYMDHMS(proc.startAt)
                }
                if (proc.exitAt != 0) {
                  proc.exitAt = that.getYMDHMS(proc.exitAt)
                }
              })
              that.list = list
            }
          })
        },
        submit() {
          if (this.proc.key == "") {
            alert("key required")
            return
          }
          if (this.proc.path == "") {
            alert("path required")
            return
          }
          let args = new Array()
          if (this.proc.args != "") {
            let arr = this.proc.args.split(" ")
            arr.forEach(arg => {
              if (arg) {
                args.push(arg)
              }
            })
          }
          let that = this
          $.ajax({
            url: "/api/add",
            type: "post",
            contentType: "application/json",
            data: JSON.stringify({
              key: that.proc.key,
              path: that.proc.path,
              args: args,
              dir: that.proc.dir,
              background: that.proc.background,
              keepAlive: that.proc.keepAlive,
            }),
            success: function (res) {
              if (res.code != 200) {
                alert(res.code)
              } else {
                setTimeout(() => {
                  that.listData()
                }, 200)
              }
            }
          })
        },
        startProc(key) {
          if (key == "") {
            return
          }
          let that = this
          $.post("/api/start?key=" + key, res => {
            if (res.code != 200) {
              alert(res.msg)
            } else {
              setTimeout(() => {
                that.listData()
              }, 200)
            }
          })
        },
        stopProc(key) {
          if (key == "") {
            return
          }
          let that = this
          $.post("/api/stop?key=" + key, {
            key: key
          }, res => {
            if (res.code != 200) {
              alert(res.msg)
            } else {
              setTimeout(() => {
                that.listData()
              }, 200)
            }
          })
        },
        deleteProc(key) {
          if (key == "") {
            return
          }
          let that = this
          $.post("/api/delete?key=" + key, {
            key: key
          }, res => {
            if (res.code != 200) {
              alert(res.msg)
            } else {
              setTimeout(() => {
                that.listData()
              }, 200)
            }
          })
        },
        getYMDHMS(timestamp) {
          let time = new Date(timestamp)
          let year = time.getFullYear()
          let month = time.getMonth() + 1
          let date = time.getDate()
          let hours = time.getHours()
          let minute = time.getMinutes()
          let second = time.getSeconds()
          if (month < 10) { month = '0' + month }
          if (date < 10) { date = '0' + date }
          if (hours < 10) { hours = '0' + hours }
          if (minute < 10) { minute = '0' + minute }
          if (second < 10) { second = '0' + second }
          return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
        }
      },
      mounted() {
        this.listData()
      }
    })
  </script>
</body>

</html>